<template>
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text"></div>
  </div>
</template>
<script>
import { upload } from "@/api/webpage"
import E from "wangeditor";
export default {
  name: "editor",
  data() {
    return {
      editor: null,
      info_: null,
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    isClear: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear();
        this.info_ = null;
      }
    },
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
  },
  mounted() {
    this.seteditor();
    this.editor.txt.html(this.value);
  },
  methods: {
    seteditor() {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
      this.editor.config.onchange = (html) => {
        this.info_ = html// 绑定当前逐渐地值
        this.$emit("editorchange", this.info_);
      };
      this.editor.config.uploadImgShowBase64 = false
      this.editor.config.uploadVideoServer = 'uploadVideo'
      // this.editor.config.fontsizes  = {}
      this.editor.config.customUploadImg = function (files, insert) {
        const file = new FormData()
        file.append('file',files[0])
          upload(file).then(res => {
            insert(process.env.VUE_APP_BASE_HOST+'/show'+res.data[0].address)
          })
      }
      this.editor.config.customUploadVideo = function (files, insert) {
        const file = new FormData()
        file.append('file',files[0])
          upload(file).then(res => {
            insert(process.env.VUE_APP_BASE_HOST+'/show'+res.data[0].address)
          })
      }
      this.editor.config.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf'
      ]

      this.editor.config.fontSizes = {
        'x-small': { name: '五号', value: '1' },
        'small': { name: '小四', value: '2' },
        'normal': { name: '四号', value: '3' },
        'large': { name: '小三', value: '4' },
        'x-large': { name: '三号', value: '5' },
        'xx-large': { name: '小二 ', value: '6' },
        'xxx-large': { name: '二号', value: '7' }
      }
      // 配置字体
      this.editor.config.fontNames = [
        '宋体',
        '仿宋',
        '楷体',
        '华文仿宋',
        '华文楷体',
        '微软雅黑',
      ]
      this.editor.config.menus = [
        // 'head',
        'fontName',
        'fontSize',
        'bold',
        'italic',
        'underline',
        // 'strikeThrough',
        // 'indent',
        // 'lineHeight',
        'foreColor',
        // 'backColor',
        // 'link',
        // 'list',
        // 'todo',
        'justify',
        // 'quote',
        // 'emoticon',
        'image',
        'video',
        'table',
        // 'code',
        'splitLine',
        'undo',
        'redo',
      ]
      this.editor.config.uploadImgMaxSize = 2048 * 1024 * 1024 // 2048M 默认限制5M

      this.editor.create();

    },
  },
};
</script>
<style scoped>
  .editor {
    width: 100%;
    margin: 0px auto;
    position: relative;
    border: 1px solid #ccc;
    z-index: 100;
    min-height: 450px;
  }
  .editor .limitNum {
    position: absolute;
    right: 6px;
    bottom: -30px;
    color: #909399;
  }
  .editor .isShow {
    position: absolute;
    right: 150px;
    bottom: -30px;
  }
  .editor .toolbar {
    background-color: #8c8c8c !important;
    font-size: 16px;
    position: fixed;
    right: 200px;
    bottom:220px;
    /*left: 360px;
    top: 460px;*/
    z-index: 1000000000001 !important;
    border: 1px solid red;
  }
  .editor .toolbar .w-e-toolbar{
    z-index: 1000000000001 !important;
  }
  .editor .w-e-toolbar .w-e-menu {
    padding: 0 10px;
  }
  .editor .text {
    z-index: 1000000000000 !important;
  }
  .editor .text .w-e-panel-container {
    z-index: 999;
    left: -1px;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .editor .text .w-e-text {
    min-height: 450px;
    overflow-y: auto;
  }
</style>
